<script lang="ts">
import type Typings from "@/typings";

interface TableProp {
  loading: boolean;
  data: Typings.User.props[];
  pagination: Typings.Common.pagination;
}
</script>

<script setup lang="ts">
import service from "@/apis";
import { onMounted, ref } from "vue";
import { $confirm, $singleMsg } from "@/utils/element";
import { genderMap } from "@/dicts";
import UserDialog from "./components/dialog.vue";

// 弹窗 ref
const dialogIns = ref();

// 列表数据定义
const table = ref<TableProp>({
  loading: false,
  data: [],
  pagination: {
    page: 1,
    size: 10,
    total: 0,
  }
})

// 控制器
const controller = {
  // 获取列表数据
  async getList() {
    try {
      table.value.loading = true;
      const params = {
        page: table.value.pagination.page,
        size: table.value.pagination.size,
      };
      const {
        data: { list = [], total = 0 },
      } = await service.userListApi(params);
      table.value.data = list;
      table.value.pagination.total = total;
    } finally {
      table.value.loading = false;
    }
  },

  // 添加 | 编辑 | 查看 | 删除
  handleDetail: async (
    row: Partial<Typings.User.props>,
    mode: Typings.Common.modeType = "view"
  ) => {
    if (mode === 'delete') {
      await $confirm({ tip: "确定要删除该用户吗" });
      await service.userRemoveApi({ id: row.id });
      $singleMsg({ message: "删除成功" });
    } else {
      await dialogIns.value.open(row, mode);
    }

    controller.getList();
  },
};

onMounted(() => {
  controller.getList();
});
</script>

<template>
  <div class="user-cntainer w-full h-full overflow-hidden flex flex-col">
    <div class="btn-container text-right">
      <el-button type="success" class="mb-[10px]" @click="controller.handleDetail({}, 'add')">新增</el-button>
    </div>
    <div class="table-container flex-1 h-0">
      <el-table height="100%" :data="table.data" row-key="id" border v-loading="table.loading">
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="name" label="名称" align="center">
          <template #default="{ row }">
            <xt-button type="text" @click="controller.handleDetail(row, 'view')">
              {{ row.name }}
            </xt-button>
          </template>
        </el-table-column>
        <el-table-column prop="account" label="账号" align="center" />
        <el-table-column prop="roleId" label="角色" align="center" />
        <el-table-column label="性别" align="center">
          <template #default="{ row }">
            <span>{{ genderMap[row.gender as Typings.User.gender] || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createdTime" label="创建时间" align="center">
          <template #default="{ row }">
            {{ row.createdTime?.toTime() }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button type="text" @click="controller.handleDetail(row, 'update')">编辑</el-button>
            <el-button type="text" @click="controller.handleDetail(row, 'delete')">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container pt-[10px] flex flex-row justify-end">
      <xt-pagination :pagination="table.pagination" @change="controller.getList" />
    </div>

    <UserDialog ref="dialogIns" />
  </div>
</template>

<style lang="scss" scoped></style>
